<template>
    <div style="width:100vw;height:100vh">
        <div id="main" style="width: 50%;height:70%;"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {

        };
    },
    computed: {

    },
    created() {

    },
    mounted() {
        var myChart = this.$myEcharts('main')

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '面试量',
                textStyle: { fontSize: 38 },
            },
            grid: {
                top: '30%',
                left: '3%',
                right: '3%',
                bottom: '3%',
                containLabel: true
            },
            tooltip: {},
            legend: {
                left: '8%',
                top: '15%',
                width: '100%',
                itemWidth: 5,
                itemHeight: 20,
                data: ['C2109A(18人)', 'C2109B(22人)', 'C2109C(31人)', 'C2109D(25人)'],
                icon: "circle",   //  这个字段控制形状  类型包括 circle 圆形，triangle 三角形，diamond 四边形，arrow 变异三角形，none 无
                itemWidth: 10,  // 设置宽度
                itemHeight: 10, // 设置高度
                itemGap: 10 ,// 设置间距，
                textStyle: {
                    fontSize: 16,//字体大小
                    color: 'rgb(241, 132, 255)'//字体颜色
                },

            },
            xAxis: {
                type: 'category',
                // name: 'x轴',
                // data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
                nameTextStyle: { color: 'blue', fontSize: 20, align: 'center' },
                nameGap: 25,
                nameLocation: 'center',
                axisTick: { show: false, inside: true },
                axisLine: {
                    show: true, symbolSize: [5, 8], symbolOffset: [-5, 10], lineStyle: {
                        color: 'rgb(241, 132, 255)', type: 'solid',
                    },

                },
            },
            yAxis: {
                axisLine: {
                    show: false, symbol: 'arrow'


                },
                axisTick: { show: false, inside: true },
                axisLabel: { show: true, formatter: '{value}' },
                // name: 'y轴',
                nameLocation: 'center',
                nameTextStyle: { color: 'blue', fontSize: 20, align: 'center' },
                nameGap: 38,
            },
            dataset: {
                source: [
                    ['product', 'C2109A(18人)', 'C2109B(22人)', 'C2109C(31人)', 'C2109D(25人)'],
                    ['5.21', 20, 76, 82, 24],
                    ['5.22', 25, 70, 79, 21],
                    ['5.23', 17, 72, 80, 22],
                    ['5.24', 32, 62, 87, 41],
                    ['5.25', 19, 77, 84, 34],
                    ['5.26', 15, 56, 85, 35],
                    ['5.27', 30, 79, 90, 50]
                ]
            },
            series: [{ type: 'line', symbol: 'circle', symbolSize: 10, },
            { type: 'line', symbol: 'circle', symbol: 'circle', symbolSize: 10 },
            { type: 'line', symbol: 'circle', symbol: 'circle', symbolSize: 10, },
            { type: 'line', symbol: 'circle', symbol: 'circle', symbolSize: 10, },
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        window.onresize = function () {
            myChart.resize();
        };
    },
    watch: {

    },
    methods: {

    },
    components: {

    },
};
</script>

<style scoped>
.ss {
    color: rgb(241, 132, 255);
}
</style>
